<template>
  <div>
    <h1>{{ name }}</h1>
    <!-- <h1>{{ age }}</h1>
    <h1>{{ hobby }}</h1>
    <h1>{{ info.mather }}</h1> -->
    <button @click="onChangeName">改变</button>
  </div>
</template>

<script>
import { inject, onMounted } from 'vue';

export default {
  name: 'Children',
  // props: {
  //   name: String
  // },
  // inject: ['name'] // vue2 Options API的用法
  // inject: ['name', 'age', 'hobby', 'info'],
  setup(props) {
    // 使用 inject
    // inject 函数允许你通过两个参数定义 property：
      // 要 inject 的 property 的 name
      // 默认值 (可选)

    const name = inject('name', 'xxx');
          // age = inject('age', 18),
          // hobby = inject('hobby', 'play'),
          // info = inject('info', {
          //   mather: 'lll'
          // });

    onMounted(() => {
      setTimeout(() => {
        name.value = '李四'; // 不推荐在子、孙组件内部修改响应式的 provide 数据
        // 传递的数据被readonly 包裹 则在 inject 的组件内部不可更改，除了 inject 过来的方法

        // 注册进来的数据最好是提供方来修改 注册的内部最好不要修改

      }, 2000)
    })

    // 然而，有时需要在注入数据的组件内部更新 inject 的数据。
    // 在这种情况下，建议 provide 一个方法来负责改变响应式 property。

    const onChangeName = inject('onChangeName');

    return {
      name,
      // age,
      // hobby,
      // info,
      onChangeName
    }

  }
}
</script>

<style>

</style>